<script setup>
import { reactive } from "vue";

import Data from "@/find.json"
const find = reactive(Data)
</script>

<template>
  <body class="w-[100vw] h-[100vh] select-none">
    <header class="h-[5rem] w-full flex justify-between items-center">
        <h1 class="text-[#c77430] border-l-8 border-[#ffbf40] pl-[.5rem] ml-[1rem]">发现</h1>
    </header>
    <main class="w-full h-auto flex flex-col items-center overflow-auto">
        <shop class="h-auto w-5/6 mb-[1rem] flex flex-col justify-center items-center">
            <header class="text-[#a0a0a0] flex justify-center items-center text-[1.2rem] font-bold rounded-3xl bg-[#e0e0e0] w-5/6 mb-[.5rem] h-[2rem]">发现更多好物</header>
            <garbage class="w-full flex flex-wrap justify-center items-center">
                <div v-for="(item, index) in find" :key="index" class="w-[8rem] h-[8rem] bg-[#e0e0e0] rounded-xl mx-[.2rem] my-[.2rem] flex justify-center">
                    <text class="text-[#a0a0a0] text-[1.2rem] font-bold border-l-8 border-[#a0a0a0] mt-[1rem] flex h-[2rem] pl-[.5rem]">{{ item.title }}</text>
                </div>
            </garbage>
        </shop>
        <community class="h-auto w-5/6 mb-[1rem] flex flex-col justify-center items-center">
            <header class="text-[#a0a0a0] flex justify-center items-center text-[1.2rem] font-bold rounded-3xl bg-[#e0e0e0] w-5/6 mb-[.5rem] h-[2rem]">发现更多话题</header>
            <garbage class="w-full flex flex-col-reverse justify-center items-center">
                <div v-for="(item, index) in 4" :key="index" class="w-full h-[8rem] bg-[#e0e0e0] rounded-xl mx-[.2rem] my-[.2rem] flex px-[1rem] py-[1rem]">
                    <div class="w-full h-full">
                        <div class="flex">
                            <div class="w-[4rem] h-[4rem] bg-[#b0b0b0] rounded-xl"></div>
                            <div class="flex flex-col w-5/6 items-end">
                                <div class="w-11/12 h-[1rem] bg-[#b0b0b0] rounded-xl my-[1rem]"></div>
                                <div class="w-11/12 h-[1rem] bg-[#b0b0b0] rounded-xl"></div>
                            </div>
                        </div>
                        <div class="w-full h-[1rem] bg-[#b0b0b0] rounded-xl my-[1rem]"></div>
                    </div>
                </div>
            </garbage>
        </community>
    </main>
  </body>
</template>

<style>
@font-face {
  font-family: 'iconfont';  /* Project id 4312277 */
  src: url('//at.alicdn.com/t/c/font_4312277_9bcyyt282rl.woff2?t=1698973122571') format('woff2'),
       url('//at.alicdn.com/t/c/font_4312277_9bcyyt282rl.woff?t=1698973122571') format('woff'),
       url('//at.alicdn.com/t/c/font_4312277_9bcyyt282rl.ttf?t=1698973122571') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:24px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
</style>